import React from 'react'
// import http from '../../utils/http'
import styles from './index.module.css'
import { NavBar, Card, Radio, Stepper } from 'antd-mobile'
import { ProductCard, SubmitBar } from 'react-vant'
import { useLocation, useNavigate } from 'react-router-dom'
function Index() {
    const { state } = useLocation()
    console.log(state);

    const navigate = useNavigate()

    const onSubmit = () => {
        navigate('/pay', { state: state })
    }
    return (
        <div>
            <NavBar onBack={() => navigate(-1)}>购票页</NavBar>
            <div>
                <div className={styles.date_wroe}>
                    <div className={styles.date1_wroe}>
                        <span>5</span>
                        <span>9月</span>
                    </div>
                    <div className={styles.date1_wroe}>
                        <span>6</span>
                        <span>9月</span>
                    </div>
                    <div className={styles.date1_wroe}>
                        <span>7</span>
                        <span>9月</span>
                    </div>
                    <div className={styles.date1_wroe}>
                        <span>8</span>
                        <span>9月</span>
                    </div>
                    <div className={styles.date2_wroe}>
                        <span>9</span>
                        <span>9月</span>
                    </div>
                    <div className={styles.date1_wroe}>
                        <span>10</span>
                        <span>9月</span>
                    </div>
                    <div className={styles.date1_wroe}>
                        <span>11</span>
                        <span>9月</span>
                    </div>
                    <div className={styles.date1_wroe}>
                        <span>12</span>
                        <span>9月</span>
                    </div>
                </div>
                <div className={styles.tick_wroe}>
                    <div>
                        <h2>选择您的票</h2>
                    </div>
                    <div>
                        <Card title='VIP参观' extra={
                            <Radio.Group defaultValue='1'>
                                <Radio value='1'></Radio>
                            </Radio.Group>
                        }>
                            <div>
                                <ProductCard
                                    num={<div>￥{state.price}</div>}
                                    price={<div>10张余额</div>}
                                    title={state.title}
                                    thumb={state.image}
                                />
                            </div>
                            <div className={styles.num_wroe}>
                                <span>
                                    显示票价明细
                                </span>
                                <span>
                                    <Stepper min={0} max={5} />
                                </span>
                            </div>
                        </Card>
                    </div>
                    <div>
                        <Card title='普通参观' extra={
                            <Radio.Group >
                                <Radio value='2'></Radio>
                            </Radio.Group>
                        }>
                            <div>
                                <ProductCard
                                    num={<div>￥{state.price}</div>}
                                    price={<div>10张余额</div>}
                                    title={state.title}
                                    thumb={state.image}
                                />
                            </div>
                            <div className={styles.num_wroe}>
                                <span>
                                    显示票价明细
                                </span>
                                <span>
                                    <Stepper min={0} max={5} />
                                </span>
                            </div>
                        </Card>
                    </div>
                </div>
                <div>
                    <SubmitBar textAlign='left' label=' ' price={state.price * 100} onSubmit={() => onSubmit()} buttonText="立即购票" />
                </div>
            </div>
        </div >
    )
}

export default Index
